import React, { Component } from 'react';
import { Button, message } from 'antd';
import classnames from 'classnames';
import BankForm from './BankForm';
import PaymentForm from './PaymentForm';

import './payment.css';

class Payment extends Component {
  state = {
    editType: '',
    bankInfo: null
  };

  request = window.request;

  componentWillMount() {
    this.getBankInfo();
  }

  getBankInfo = () => {
    this.request(`/offline/bank/get`, {
      method: 'GET'
    }).then(json => {
      if (json.code === 10000000) {
        this.setState({ bankInfo: json.data });
      } else {
        message.error(json.msg);
      }
    });
  };

  edit = type => {
    this.setState({ editType: type });
  };

  handelDelete = type => {
    const account = JSON.parse(sessionStorage.getItem('account'));
    this.request(`/offline/${type === 'wechat' ? 'wechatpay' : type}/clean`).then(json => {
      if (json.code === 10000000) {
        let typeName = '银行卡';
        if (type === 'bank') {
          this.setState({ bankInfo: null });
        } else {
          if (type === 'alipay') {
            typeName = '支付宝';
          } else {
            typeName = '微信';
          }
          delete account[`${type}No`];
          delete account[`${type}QrcodeId`];
          sessionStorage.setItem('account', JSON.stringify(account));
        }
        message.success(`${typeName}账号删除成功`);
        this.edit('delete');
      }
    });
  };

  render() {
    const { editType, bankInfo } = this.state;

    const { realName, wechatNo, alipayNo } = JSON.parse(sessionStorage.getItem('account'));

    const bankTriggerBtnText = bankInfo ? '修改' : '立即绑定';
    const wechatTriggerBtnText = wechatNo ? '修改' : '立即绑定';
    const alipayTriggerBtnText = alipayNo ? '修改' : '立即绑定';

    return (
      <div className="user-cont payment">
        <h2 className="payment-tit">绑定支付方式</h2>
        <div
          className={classnames({
            'payment-cell': true,
            unfold: editType === 'bank'
          })}
        >
          <div className="payment-cell-block clear">
            <div className="payment-header pull-left">
              <i className="iconfont icon-yinhangqia" />
              银行卡
            </div>
            <div className="payment-account-name pull-left">{bankInfo && bankInfo.cardNo}</div>
            <div className="pull-right">
              {bankInfo && (
                <Button type="primary" onClick={this.handelDelete.bind(this, 'bank')}>
                  删除
                </Button>
              )}
              <Button
                type="primary"
                style={{ marginLeft: '10px' }}
                onClick={this.edit.bind(this, editType === 'bank' ? '' : 'bank')}
              >
                {editType === 'bank' ? '取消' : `${bankTriggerBtnText}`}
              </Button>
            </div>
          </div>
          <div className="payment-cell-form">
            {editType === 'bank' && (
              <BankForm bankInfo={bankInfo} setBankInfo={this.getBankInfo} edit={this.edit} />
            )}
          </div>
        </div>
        <div
          className={classnames({
            'payment-cell': true,
            unfold: editType === 'wechat'
          })}
        >
          <div className="payment-cell-block clear">
            <div className="payment-header pull-left">
              <i className="iconfont icon-wxpay" />
              微信支付
            </div>
            <div className="payment-account-name pull-left">{realName}</div>
            <div className="pull-right">
              {wechatNo && (
                <Button type="primary" onClick={this.handelDelete.bind(this, 'wechat')}>
                  删除
                </Button>
              )}
              <Button
                type="primary"
                style={{ marginLeft: '10px' }}
                onClick={this.edit.bind(this, editType === 'wechat' ? '' : 'wechat')}
              >
                {editType === 'wechat' ? '取消' : `${wechatTriggerBtnText}`}
              </Button>
            </div>
          </div>
          <div className="payment-cell-form">
            {editType === 'wechat' && <PaymentForm type="wechat" edit={this.edit} />}
          </div>
        </div>
        <div
          className={classnames({
            'payment-cell': true,
            unfold: editType === 'alipay'
          })}
        >
          <div className="payment-cell-block clear">
            <div className="payment-header pull-left">
              <i className="iconfont icon-zhifubao" />
              支付宝
            </div>
            <div className="payment-account-name pull-left">{realName}</div>

            <div className="pull-right">
              {alipayNo && (
                <Button type="primary" onClick={this.handelDelete.bind(this, 'alipay')}>
                  删除
                </Button>
              )}
              <Button
                type="primary"
                style={{ marginLeft: '10px' }}
                onClick={this.edit.bind(this, editType === 'alipay' ? '' : 'alipay')}
              >
                {editType === 'alipay' ? '取消' : `${alipayTriggerBtnText}`}
              </Button>
            </div>
          </div>
          <div className="payment-cell-form">
            {editType === 'alipay' && <PaymentForm type="alipay" edit={this.edit} />}
          </div>
        </div>
      </div>
    );
  }
}

export default Payment;
